<template>
  <div class="withdraw-selection">
      <a-alert
        message="退选说明"
        description="退选后课程将进入退课池，其他学生可以补选。请谨慎操作，退选后可能无法再次选上该课程。"
        type="warning"
        showIcon
        style="margin-bottom: 16px;"
      />
      
      <a-table
        :columns="columns"
        :dataSource="selectedCourses"
        rowKey="id"
        :pagination="pagination"
        :loading="loading"
      >
        <span slot="timeLocation" slot-scope="text, record">
          <div>{{ record.time }}</div>
          <div>{{ record.location }}</div>
        </span>

        <span slot="status" slot-scope="text, record">
          <a-tag :color="getStatusColor(record.status)">
            {{ record.status }}
          </a-tag>
        </span>

        <span slot="action" slot-scope="text, record">
          <a-popconfirm
            title="确定要退选该课程吗?"
            okText="确定"
            cancelText="取消"
            @confirm="handleWithdraw(record)"
            :disabled="!canWithdraw(record)"
          >
            <a-button 
              type="danger" 
              size="small"
              :disabled="!canWithdraw(record)"
            >
              退选
            </a-button>
          </a-popconfirm>
          <a-tooltip v-if="!canWithdraw(record)" :title="getDisabledReason(record)">
            <a-icon type="question-circle" style="margin-left: 8px" />
          </a-tooltip>
        </span>
      </a-table>
  </div>
</template>

<script>
const columns = [
  {
    title: '课程编号',
    dataIndex: 'id',
    key: 'id',
    width: 100
  },
  {
    title: '课程名称',
    dataIndex: 'name',
    key: 'name',
    width: 150
  },
  {
    title: '学分',
    dataIndex: 'credit',
    key: 'credit',
    width: 80
  },
  {
    title: '任课教师',
    dataIndex: 'teacher',
    key: 'teacher',
    width: 120
  },
  {
    title: '时间/地点',
    key: 'timeLocation',
    scopedSlots: { customRender: 'timeLocation' },
    width: 180
  },
  {
    title: '选课状态',
    key: 'status',
    scopedSlots: { customRender: 'status' },
    width: 100
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
    width: 100
  }
];

export default {
  data() {
    return {
      columns,
      selectedCourses: [],
      loading: false,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50'],
        showTotal: total => `共 ${total} 门已选课程`
      }
    };
  },
  created() {
    this.fetchSelectedCourses();
  },
  methods: {
    fetchSelectedCourses() {
      this.loading = true;
      // 模拟API调用
      setTimeout(() => {
        this.selectedCourses = this.generateMockSelectedCourses();
        this.pagination.total = this.selectedCourses.length;
        this.loading = false;
      }, 500);
    },
    
    generateMockSelectedCourses() {
      return [
        {
          id: 'CS101',
          name: '计算机科学导论',
          credit: 3,
          teacher: '李红梅',
          time: '周一 1-2节, 周三 3-4节',
          location: '信息楼201',
          status: '已确认',
          canWithdraw: true
        },
        {
          id: 'MATH202',
          name: '高等数学（上）	II',
          credit: 4,
          teacher: '李娜',
          time: '周二 1-2节, 周四 1-2节',
          location: '1号教学楼',
          status: '已确认',
          canWithdraw: true
        },
        {
          id: 'ENG105',
          name: 'PLC与工业控制技术',
          credit: 2,
          teacher: '王雪',
          time: '周五 5-6节',
          location: '外语楼102',
          status: '已确认',
          canWithdraw: true
        },
        {
          id: 'ECON301',
          name: '自动化生产线安装与调试',
          credit: 3,
          teacher: '李娜',
          time: '周三 5-6节',
          location: '经管楼105',
          status: '已确认',
          canWithdraw: true
        },
        {
          id: 'CS302',
          name: '数据结构与算法',
          credit: 4,
          teacher: '李红梅',
          time: '周二 5-6节, 周四 5-6节',
          location: '信息楼303',
          status: '已锁定',
          canWithdraw: false
        },
      ];
    },
    
    getStatusColor(status) {
      const colors = {
        '已确认': 'green',
        '待抽签': 'orange',
        '已锁定': 'red'
      };
      return colors[status] || 'blue';
    },
    
    canWithdraw(course) {
      return course.canWithdraw && course.status === '已确认';
    },
    
    getDisabledReason(course) {
      if (!course.canWithdraw) {
        return '该课程不允许退选';
      }
      if (course.status !== '已确认') {
        return `课程状态为${course.status}，不可退选`;
      }
      return '不可退选';
    },
    
    handleWithdraw(course) {
      this.$message.success(`成功退选课程: ${course.name}`);
      this.selectedCourses = this.selectedCourses.filter(c => c.id !== course.id);
      this.pagination.total = this.selectedCourses.length;
      this.$emit('withdraw', course.id);
    }
  }
};
</script>

<style scoped>
.withdraw-selection {
  margin: 0;
  padding:20px;
}
</style>